<!DOCTYPE html>
<head>
<style type="text/css">
	td>span
	{
		font-size:12px;
		font-style:italic;
		color:#CDCDCD;
	}
	
	#zi{
		font-size:18px;
	}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>个人中心</title>
  <link rel="stylesheet" href="layui/css/layui.css">
<title>Insert title here</title>
</head>
<html>
<body onload="load()">
<script src="layui/layui.js"></script> 
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
  <legend>信息修改</legend>
  <div class="layui-container">  
  <div class="layui-row">
    <div class="layui-col-md2">
    </div>
    <div class="layui-col-md10">
      <div id= "example">
<form id="formid" method="post">
<table v-for = "p in students">
	<tr><td id="zi">用户昵称：</td><td><input type="text" name="name"><span>{{p.name}}</span></td></tr>
	<tr><td id="zi">用户ID：</td><td><span>{{p.id}}</span></td></tr>
	<tr><td id="zi">账号：</td><td><span>{{p.username}}</span></td></tr>
	<tr><td id="zi">真实姓名：</td><td><span>{{p.realname}}</span></td></tr>
	<tr><td id="zi">邮箱：</td><td><input type="text" name="email"><span>{{p.email}}</span></td></tr>
	<tr><td id="zi">电话：</td><td><input type="text" name="phone"><span>{{p.phone}}</span></td></tr>
	<tr><td id="zi">QQ：</td><td><input type="text" name="qq"><span>{{p.qq}}</span></td></tr>
</table>
<input type="submit" value="提交修改" onclick="up()" class="layui-btn layui-btn-sm">
<input type="button" value="返回个人中心" onclick="back()" class="layui-btn layui-btn-normal layui-btn-sm">
</form>
</div>
    </div>
  </div>
  
</fieldset>

</body>
</html>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue.min.js"></script>
<script type="text/javascript">
var vr = new Vue({
	el : '#example',
	data : {
		students : [{
			name : '', 
			id  : '',
			username  : '',
			state  : '',
			realname : '',
			email : '',
			phone : '',
			qq : '',
			
		}]
	}
});
//截取发送的username,传给Controller
var pageobj = {};
var username="";
var  a = decodeURI(location.search); //获取URL中？后的字符串

pageobj[0] =(a.substr(a.indexOf("=")+1));//截取"="后面的值

username = pageobj[0];
function load(){//页面加载函数，加载的时候就发送ajzx请求	
	$.ajax({
		type:"POST",
		url:"/xueyou/queryclass.action",
		data:{username:username},
		dataType:"json",
		success: function(data){
			vr.students = data;
			console.log("recv message:"+JSON.stringify(data));
			
		},
		error: function(data, type, err){
			console.log(type);
			console.log(err);
		}
	});
}

function up(){//提交修改的数据
	$.ajax({
		type:"POST",
		url:"/xueyou/messageServlet?action=messageupdate&username="+username,
		data:$('#formid').serialize(),
		dataType:"json",
		success:function(data){
			if(data>0){
				
			}else{
				alert("操作失败"+$(".user").val+"|"+data);
			}
		},
		error:function(data){
			console.log("操作异常"+data.responseText);
		}
	});
}

function back(){//页面加载函数，加载的时候就发送ajzx请求	
	$.ajax({
		type:"POST",
		url:"/xueyou/messageServlet",
		data:{username:username},
		dataType:"json",
		success: function(data){
			vr.students = data;
			window.location.href="message.html?username="+username;
			
		},
		error: function(data, type, err){
			console.log(type);
			console.log(err);
		}
	});
}

</script>